<template>
  <el-form
    ref="alForm"
    v-bind="$attrs"
    v-on="$listeners"
    class="al-form"
    :model="model"
  >
    <el-form-item
      v-for="i in formItem.filter((val) => !val.hide)"
      :key="i.id"
      :label="i.label"
      :prop="i.model"
      :label-width="i.width"
      :required="i.required"
      :inline-message="i.inlineMessage"
    >
      <el-input
        v-if="i.item === 'input'"
        v-model="model[i.model]"
        :type="i.type"
        :maxlength="i.maxlength"
        :minlength="i.minlength"
        :show-word-limit="i.showWordLimit"
        :placeholder="i.placeholder"
        :clearable="i.clearable"
        :show-password="i.showPassword"
        :disabled="i.disabled"
        :size="i.size"
        :prefix-icon="i.prefixIcon"
        :suffix-icon="i.suffixIcon"
        :rows="i.rows"
        :autosize="i.autosize"
        :autocomplete="i.autocomplete"
        :name="i.name"
        :readonly="i.readonly"
        :max="i.max"
        :min="i.min"
        :step="i.step"
        :resize="i.resize"
        :autofocus="i.autofocus"
        :form="i.form"
        :label="i.label"
        :tabindex="i.tabindex"
        :validate-event="i.validateEvent"
      />
      <el-select
        v-else-if="i.item === 'select'"
        v-model="model[i.model]"
        :multiple="i.multiple"
        :disabled="i.disabled"
        :value-key="i.valueKey"
        :clearable="i.clearable"
        :collapse-tags="i.collapseTags"
        :multiple-limit="i.multipleLimit"
        :name="i.name"
        :autocomplete="i.autocomplete"
        :placeholder="i.placeholder"
        :filterable="i.filterable"
        :filter-method="i.filterMethod"
        :no-match-text="i.noMatchText"
        :no-data-text="i.noDataText"
        :popper-class="i.popperClass"
        :reserve-keyword="i.reserveKeyword"
        :popper-append-to-body="i.popperAppendToBody"
      >
        <div v-if="i.dataType === 'object'">
          <el-option
            v-for="(j, index) in i.child"
            :key="j.id"
            :value="j"
            :label="index"
            :disabled="j.disabled"
          />
        </div>
        <div v-else-if="i.dataType === 'group'">
          <el-option-group v-for="j in i.child" :key="j.label" :label="j.label">
            <el-option
              v-for="k in j.options"
              :key="k.value"
              :label="k.label"
              :value="k.value"
              :disabled="k.disabled"
            >
            </el-option>
          </el-option-group>
        </div>
        <div v-else>
          <el-option
            v-for="j in i.child"
            :key="j.id"
            :label="j.label"
            :value="j.value"
            :disabled="j.disabled"
          />
        </div>
      </el-select>
      <div v-else-if="i.item === 'time-select'">
        <el-time-picker v-if="i.type === 'picker'"
          v-model="model[i.model]"
          :readonly="i.readonly"
          :disabled="i.disabled"
          :editable="i.editable"
          :clearable="i.clearable"
          :size="i.size"
          :placeholder="i.placeholder"
          :start-placeholder="i.startPlaceholder"
          :end-placeholder="i.endPlaceholder"
          :is-range="i.isRange"
          :arrow-control="i.arrowControl"
          :align="i.align"
          :popper-class="i.popperClass"
          :picker-options="i.pickerOptions"
          :range-separator="i.rangeSeparator"
          :value-format="i.valueFormat"
          :default-value="i.defaultValue"
          :name="i.name"
          :prefix-icon="i.prefixIcon"
          :clear-icon="i.clearIcon"
        >
        </el-time-picker>
        <el-time-select v-else
          v-model="model[i.model]"
          :readonly="i.readonly"
          :disabled="i.disabled"
          :editable="i.editable"
          :clearable="i.clearable"
          :size="i.size"
          :placeholder="i.placeholder"
          :start-placeholder="i.startPlaceholder"
          :end-placeholder="i.endPlaceholder"
          :is-range="i.isRange"
          :arrow-control="i.arrowControl"
          :align="i.align"
          :popper-class="i.popperClass"
          :picker-options="i.pickerOptions"
          :range-separator="i.rangeSeparator"
          :value-format="i.valueFormat"
          :default-value="i.defaultValue"
          :name="i.name"
          :prefix-icon="i.prefixIcon"
          :clear-icon="i.clearIcon"
        >
        </el-time-select>
      </div>
     
      <el-date-picker
        v-else-if="i.item === 'date-picker'"
        v-model="model[i.model]"
        :readonly="i.readonly"
        :disabled="i.disabled"
        :editable="i.editable"
        :clearable="i.clearable"
        :placeholder="i.placeholder"
        :start-placeholder="i.startPlaceholder || '开始日期'"
        :end-placeholder="i.endPlaceholder || '结束日期'"
        :type="i.type"
        :format="i.format"
        :align="i.align"
        :popper-class="i.popperClass"
        :picker-options="i.pickerOptions"
        :range-separator="i.rangeSeparator"
        :default-value="i.defaultValue"
        :default-time="i.defaultTime"
        :value-format="i.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
        :name="i.name"
        :unlink-panels="i.unlinkPanels"
        :prefix-icon="i.prefixIcon"
        :clear-icon="i.clearIcon"
        :validate-event="i.validateEvent"
      />
      <el-radio-group
        v-else-if="i.item === 'radio'"
        v-model="model[i.model]"
        :disabled="i.disabled"
        :text-color="i.textColor"
        :fill="i.fill"
      >
        <el-radio
          v-for="j in i.child"
          :key="j.id"
          :label="j.value"
          :disabled="j.disabled"
          :border="j.border"
          :name="j.name"
          :size="j.size"
          >{{ j.label }}</el-radio
        >
      </el-radio-group>
      <el-checkbox-group
        v-else-if="i.item === 'checkbox'"
        v-model="model[i.model]"
        :disabled="i.disabled"
        :min="i.min"
        :max="i.max"
        :text-color="i.textColor"
        :fill="i.fill"
      >
        <div v-if="i.dataType === 'button'">
          <el-checkbox-button
            v-for="j in i.child"
            :label="j.value"
            :true-label="j.trueLabel"
            :false-label="j.falseLabel"
            :disabled="j.disabled"
            :border="j.border"
            :name="j.name"
            :checked="j.checked"
            :indeterminate="j.indeterminate"
            :key="j.id"
            >{{ j.label }}</el-checkbox-button
          >
        </div>
        <div v-else>
          <el-checkbox
            v-for="j in i.child"
            :label="j.value"
            :true-label="j.trueLabel"
            :false-label="j.falseLabel"
            :disabled="j.disabled"
            :border="j.border"
            :name="j.name"
            :checked="j.checked"
            :indeterminate="j.indeterminate"
            :key="j.id"
            >{{ j.label }}</el-checkbox
          >
        </div>        
      </el-checkbox-group>
      
      <slot v-else-if="i.item === 'slot'" :name="i.name" :row="i" />
    </el-form-item>
    <el-form-item v-if="btnItemFlog">
      <slot>
        <el-button type="warning" @click="reset('alForm')" v-bind="$attrs">重置</el-button>
        <el-button type="primary" @click="submit('alForm')" v-bind="$attrs">提交</el-button>
      </slot>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    formItem: {
      type: Array,
      default() {
        return [];
      },
    },
    model: {
      type: Object,
      default() {
        return {};
      },
    },
    btnItemFlog: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit("submit");
        } else {
          console.log("error submit!!");
          return false;
        }
      })
    },
    reset(formName) {
      this.$refs[formName].resetFields();
      this.$emit("reset");
    },
  },
};
</script>
